<template>
  <div class="dynamic-form-container">
    <el-card shadow="hover" header="进货入库">
      <el-form :model="form" ref="formRulesOneRef" size="default" label-width="100px" class="mt35">
        <el-row :gutter="35">
          <el-col
              :xs="val.xs"
              :sm="val.sm"
              :md="val.md"
              :lg="val.md"
              :xl="val.xl"
              class="mb20"
              v-show="val.isShow"
              v-for="(val, key) in formData"
              :key="key"
          >
            <template v-if="val.type !== ''">
              <el-form-item
                  :label="val.label"
                  :prop="val.prop"
                  :rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
                  v-if="val.type !== ''"
              >
                <el-input
                    v-model="form[val.prop]"
                    :placeholder="val.placeholder"
                    clearable
                    v-if="val.type === 'input'"
                    style="width: 100%"
                    :disabled="val.disabled"
                ></el-input>
                <el-date-picker
                    v-model="form[val.prop]"
                    type="date"
                    :placeholder="val.placeholder"
                    v-else-if="val.type === 'date'"
                    style="width: 100%"
                    :disabled="val.disabled"
                >
                </el-date-picker>
                <el-select
                    v-model="form[val.prop]"
                    :placeholder="val.placeholder"
                    v-else-if="val.type === 'select'"
                    style="width: 100%"
                    :disabled="val.disabled"
                >
                  <el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
                <el-input
                    type="textarea"
                    v-model="form[val.prop]"
                    :placeholder="val.placeholder"
                    clearable
                    v-if="val.type === 'textarea'"
                    style="width: 100%"
                    :disabled="val.disabled"
                ></el-input>
              </el-form-item>
            </template>
            <template v-else>
              <el-row :gutter="35" v-for="(v, k) in form.list" :key="k">
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="年度" :prop="`list[${k}].year`" :rules="[{ required: true, message: `年度不能为空`, trigger: 'blur' }]">
                    <template #label>
                      <el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
                        <el-icon>
                          <ele-Plus />
                        </el-icon>
                      </el-button>
                      <el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
                        <el-icon>
                          <ele-Delete />
                        </el-icon>
                      </el-button>
                      <span class="ml10">年度</span>
                    </template>
                    <el-input v-model="form.list[k].year" style="width: 100%" placeholder="请输入"> </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="月度" :prop="`list[${k}].month`" :rules="[{ required: true, message: `月度不能为空`, trigger: 'blur' }]">
                    <el-input v-model="form.list[k].month" style="width: 100%" placeholder="请输入"> </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="日度" :prop="`list[${k}].day`" :rules="[{ required: true, message: `日度不能为空`, trigger: 'blur' }]">
                    <el-input v-model="form.list[k].day" style="width: 100%" placeholder="请输入"> </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </el-col>
        </el-row>
        <el-row class="flex mt15">
          <div class="flex-margin">
            <el-button size="default" @click="onResetForm">
              <el-icon>
                <ele-RefreshRight />
              </el-icon>
              重置表单
            </el-button>
            <el-button size="default" type="primary" @click="onSubmitForm">
              <SvgIcon name="iconfont icon-shuxing" />
              保存
            </el-button>
          </div>
        </el-row>
      </el-form>
      <el-button @click="resetDateFilter">添加</el-button>
      <el-button @click="clearFilter">修改</el-button>
      <el-button @click="clearFilter">删除</el-button>
      <el-table
          :data="tableData"
          style="width: 100%"
          height="250">

        <el-table-column
            fixed
            prop="date"
            label="商品编码"
            width="150">
        </el-table-column>
        <el-table-column
            prop="name"
            label="商品名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="province"
            label="商品型号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="city"
            label="商品单位"
            width="120">
        </el-table-column>
        <el-table-column
            prop="address"
            label="单价"
            width="300">
        </el-table-column>
        <el-table-column
            prop="zip"
            label="数量"
            width="120">
        </el-table-column>
        <el-table-column
            prop="zip"
            label="总金额"
            width="120">
        </el-table-column>
      </el-table>
    </el-card>

  </div>

</template>
//进货入库
<script lang="ts">
import { toRefs, reactive, onMounted, getCurrentInstance, defineComponent } from 'vue';
import { formData } from './mock';

// 定义接口来定义对象的类型
interface FormDataOptions {
  label: string;
  value: string;
}
interface FormDataState {
  label: string;
  prop: string;
  placeholder: string;
  clearable: boolean;
  disabled: boolean;
  required: boolean;
  type: string;
  i18n: boolean;
  i18nText: string;
  isShow: boolean;
  xs: number;
  sm: number;
  md: number;
  lg: number;
  xl: number;
  options?: FormDataOptions[];
}
interface DynamicFormState {
  formData: FormDataState[];
  form: any;
}

export default defineComponent({
  name: 'menu11',
  setup() {
    const { proxy } = <any>getCurrentInstance();
    const state = reactive<DynamicFormState>({
      formData,
      form: {
        name: '',
        email: '',
        autograph: '',
        occupation: '',
        list: [
          {
            year: '',
            month: '',
            day: '',
          },
        ],
        remarks: '',
      },
    });
    // 新增行
    const onAddRow = () => {
      state.form.list.push({
        year: '',
        month: '',
        day: '',
      });
    };
    // 删除行
    const onDelRow = (k: number) => {
      state.form.list.splice(k, 1);
    };
    // 表单验证
    const onSubmitForm = () => {
      proxy.$refs.formRulesOneRef.validate((valid: boolean) => {
        if (valid) {
          proxy.$message.success('验证成功');
        } else {
          return false;
        }
      });
    };
    // 重置表单
    const onResetForm = () => {
      proxy.$refs.formRulesOneRef.resetFields();
    };
    // 页面加载时
    onMounted(() => {});
    return {
      onAddRow,
      onDelRow,
      onSubmitForm,
      onResetForm,
      ...toRefs(state),
    };
  },
});
</script>
